<script>
import { reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { getBookcityJsonData } from "/assets/api/bookcity.js";
export default {
  setup() {
    let router = useRouter();

    let back = () => {
      router.go(-1);
    };

    let listObj = reactive({
      HotCategories: [],
      activityList: [],
      completBookList: [],
      hotList: [],
      endItem: [],
    });

    // 数据初始化
    let dateInit = async () => {
      let data = await getBookcityJsonData();
      listObj.HotCategories = JSON.parse(JSON.stringify(data.HotCategories));
      listObj.activityList = JSON.parse(JSON.stringify(data.activityList));
      listObj.completBookList = JSON.parse(
        JSON.stringify(data.completBookList)
      );
      listObj.hotList = JSON.parse(JSON.stringify(data.hotList));

      filterItem(listObj.HotCategories);
      filterItem(listObj.activityList);
      filterItem(listObj.completBookList);
      filterItem(listObj.hotList);
    };

    let filterItem = (item) => {
      item.forEach((item) => {
        if (item.isEnd) {
          listObj.endItem.push(item);
        } else {
          return;
        }
      });
    };

    // 挂载前
    onBeforeMount(() => {
      // 数据初始化
      dateInit();
    });

    let details = (id) => {
      router.push({ path: "/Details", query: { id: id } });
    };

    return {
      back,
      listObj,
      details,
    };
  },
};
</script>

<template>
  <div class="End">
    <van-sticky>
      <div class="top">
        <span class="iconfont icon-xiangzuo1" @click="back"></span>
        <p>完本</p>
        <span class="iconfont icon-xiangzuo1" style="opacity: 0"></span>
      </div>
    </van-sticky>
    <div class="endBox">
      <div
        class="endItem"
        v-for="(item, index) in listObj.endItem"
        :key="index"
        @click="details(item.BookId)"
      >
        <div class="img">
          <img :src="item.BookImage" alt="" />
        </div>
        <div class="text">
          <div class="title">{{ item.BookName }}</div>
          <div class="content">
            古风很倒霉，因为一本书竟然穿越了修仙世界。最气的是，别人穿越都是穿越成人，他竟然穿越成了一座山。“我要做人。”古风大叫。其实做山也蛮好的，安全的永远不会担心死掉。就在古风这样想时，危险却悄然来临。“还让不让人活啦…不对，还让不让山活啦。”古风很愤怒，我一定要把这个世界搅得天翻地覆！世界本无仙，且看他一山成仙。一人一山，便是仙！欢迎加入古道南风书友群。527451853
          </div>
          <div class="name">{{ item.Author }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.End {
  min-height: 100%;
  min-width: 375px;
  max-width: 750px;
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f8f8;
  .top {
    display: flex;
    width: 100%;
    padding: 0 16px;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
    .icon-xiangzuo1 {
      font-size: 22px;
      color: #b1b1b1;
    }
    p {
      color: #3d3d3d;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .endBox {
    padding: 0 14px 10px;
    margin-top: 10px;
    .endItem {
      border-radius: 15px;
      padding: 18px 13px;
      align-items: center;
      display: flex;
      background-color: #fff;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      .img {
        flex-shrink: 0;
        width: 100px;
        height: 134px;
        border-radius: 10px;
        overflow: hidden;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
        height: 115px;
        .title {
          font-size: 14px;
          font-weight: bold;
        }
        .content {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 20px;
          font-size: 12px;
          color: #b1b1b1;
        }
        .name {
          font-size: 12px;
          color: #7d7a7a;
        }
      }
    }
  }
}
</style>